<template>
  <uni-popup ref="popupRef" type="dialog" @maskClick.stop="cancelForm">
    <view class="input-pop" @click.stop>
      <view class="header">
        操作确认
      </view>
      <view class="conent-wrap">
        <view class="form-tip">
          <image :src="tipPath" mode="scaleToFill" style="width:40rpx;height:40rpx;margin-right:6rpx" />
          取消后，该笔订单将作废
        </view>
        <view>
          <view class="label"><text class="required">*</text>取消类型</view>
          <view>
            <uni-data-select v-model="formData.cancelType" :localdata="cancelTypeList"></uni-data-select>
          </view>
        </view>
        <view>
          <view class="label">备注</view>
          <view>
            <uni-easyinput v-model="formData.remark" type="textarea" maxlength="50" placeholder="请输入50字以内的备注说明"
              @input="easyinputChange" />
          </view>
        </view>
      </view>
      <view class="footer">
        <view @click.top="cancelForm">取消</view>
        <view @click.top="submitForm" style="color: #409EFE" :class="{ loading: formLoading }">
          确定<view v-if="formLoading" class="loading-icon"></view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>
<script>
  import { toast } from '@/utils/common';
  import { getDictList } from '@/api/login';
  import {
    cancelWaybill
  } from '@/api/me.js';
  export default {
    props: {
      popId: {
        type: String,
        default: undefined
      },
      show: {
        type: Boolean,
        defult: false
      }
    },
    watch: {
      show(flag) {
        if (flag) {
          this.getDictList()
          this.formData.id = this.popId
          this.$refs.popupRef.open()
          return
        }
        this.$refs.popupRef.close()
      }
    },
    data() {
      return {
        formLoading: false,
        cancelTypeList: [],
        formData: {
          id: undefined,
          cancelType: undefined,
          remark: undefined
        }
      }
    },
    methods: {
      easyinputChange(value) {
        if (value.length >= 50) {
          this.formData.remark = value.slice(0, 50)
        } else {
          this.formData.remark = value
        }
      },
      async getDictList() {
        const res = await getDictList();
        if (res.code === 0) {
          const result = (res?.data || []).filter(
            (e) => e.dictType === 'cancel_type'
          );
          this.cancelTypeList = result.map(e => {
            return {
              value: e.value,
              text: e.label
            }
          })
        }
      },
      cancelForm() {
        this.resetForm()
        this.$emit('cancel');
      },
      async submitForm() {
        if (!this.formData.cancelType) {
          toast('请选择取消类型')
          return
        }
        try {
          if (this.formLoading) return;
          this.formLoading = true;
          const res = await cancelWaybill(this.formData)
          if (res.code === 0) {
            toast('取消操作成功')
            this.resetForm()
            this.$emit('success');
          } else {
            toast(res.msg)
          }
        } finally {
          this.formLoading = false
        }
      },
      resetForm() {
        Object.keys(this.formData).forEach(key => this.formData[key] = undefined)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .input-pop {
    border-radius: 20rpx !important;
    background-color: #ffffff;
    width: 600rpx;

    .header {
      position: relative;
      padding: 20rpx 40rpx;
      text-align: center;
      border-bottom: 2rpx solid #eaeaea;
      font-size: 32rpx;
      font-weight: 500;
    }

    .conent-wrap {
      padding: 40rpx 48rpx;

      .form-tip {
        padding-left: 52rpx;
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
      }

      .label {
        margin: 20rpx 0 10rpx 0;
        font-size: 26rpx;
      }

      .required {
        color: #FF4D4F;
        font-size: 40rpx;
        position: relative;
        top: 12rpx;
      }
    }

    .footer {
      display: flex;
      height: 100rpx;
      border-top: 2rpx solid #EAEAEA;

      >view {
        flex: 1;
        font-size: 30rpx;
        text-align: center;
        line-height: 100rpx;
      }

      >view+view {
        border-left: 2rpx solid #EAEAEA;
      }
    }
  }

  .loading {
    position: relative;
  }

  .loading-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 45%;
    left: 30%;
    transform: translate(-50%, -50%);
  }

  :v-deep.uni-easyinput__content-textarea {
    height: 80rpx !important;
    min-height: 80rpx !important;
  }
</style>